<!--
 * @Author: Lzx
 * @LastEditors: Lzx
 * @Date: 2021-06-24 09:06:36
 * @LastEditTime: 2023-05-22 10:14:17
 * @FilePath: /web-vue/src/views/Login.vue
 * @Description: 系统登录组件
-->
<template>
  <div style="background: #000">
    <div class="login">
      <div id="title">
        <span>民宿住房系统</span>
      </div>
      <div>
        <img id="u8" src="@/assets/images/login/u8.svg" />
        <div id="u22"><span>账号</span></div>
        <img src="@/assets/images/login/u23.svg" id="u23" />
        <div id="u47">
          <input
            class="username"
            type="text"
            autocomplete="off"
            v-model="loginForm.user"
          />
        </div>
      </div>
      <div>
        <img id="u26" src="@/assets/images/login/u8.svg" />
        <div id="u40"><span>密码</span></div>
        <img src="@/assets/images/login/u23.svg" id="u41" />
        <div id="u45">
          <input
            class="password"
            type="password"
            autocomplete="off"
            v-model="loginForm.password"
            @keyup.enter="login"
            :disabled="submitDisabled"
          />
        </div>
        <div class="loginBt" @click="login">登&nbsp;录</div>
        <!-- <div class="loginBt" @click="$refs.chooseForm.openAddForm(true)">
          登&nbsp;录
        </div> -->
        <div class="loginBt2" @click="$refs.registerForm.openAddForm(true)">
          <span>注册</span>
        </div>
      </div>
    </div>

    <!-- 编辑地区表单 -->
    <ChooseForm ref="chooseForm" @afterSubmit="loginBefore"></ChooseForm>
    <!-- 用户注册表单 -->
    <RegisterForm ref="registerForm"></RegisterForm>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

import ChooseForm from "@/views/Region/chooseForm.vue";
import RegisterForm from "@/views/SysUser/registerForm.vue";

export default {
  name: "login",

  components: {
    ChooseForm,
    RegisterForm,
  },

  data() {
    return {
      loginForm: {
        user: "",
        password: "",
      },
      submitDisabled: false,
      redirectUrl: this.$route.query.redirect,
    };
  },

  computed: {
    // 最近一次路由url属性变化。latestRouteUrl 是 store.js 的全局变量，
    latestRouteUrl: {
      get() {
        return this.$store.state.latestRouteUrl;
      },
      set(val) {
        if (val) this.$store.state.latestRouteUrl = val;
      },
    },
  },

  methods: {
    // store 方法
    ...mapMutations({
      initState: "initState",
    }),

    // 登录请求处理
    login() {
      // 密码输入框不可用
      this.submitDisabled = true;
      // 请求参数
      let param = {};
      param["username"] = this.loginForm.user;
      param["password"] = this.loginForm.password;

      const loading = this.$loading({
        target: document.querySelector(".login"),
        lock: true,
        text: "正在登录，请耐心等待！",
      });

      let vueIns = this;
      this.$api
        .userLoginAuth(param)
        .then((res) => {
          let { status, message, data } = res.data;
          if (status === 200) {
            // 保存会话
            localStorage.setItem("userSession", JSON.stringify(data));
            // 初始化 vuex 全局变量
            this.initState();
            // 初始化字典信息
            this.initCommonDict();
            // 初始化部分页面的权限控制
            this.initAuth();
            // 根据角色路由跳转，管理员跳转到后台页
            if (data.roleIds.indexOf(7) > -1) {
              // 若重定向路径不为空，则跳转，否则默认跳转到首页
              this.$router.push(this.redirectUrl ? this.redirectUrl : "/");
            } else {
              this.$router.push("/view/Index");
            }
          } else {
            this.$alert(message, "登录失败", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {
                this.submitDisabled = false;
              },
            });
          }

          loading.close();
          this.submitDisabled = false;
        })
        .catch(function (err) {
          loading.close();
          vueIns.submitDisabled = false;
          console.log("【用户登录】接口发生错误: " + err);
        });
    },

    // 初始化通用字典信息
    initCommonDict() {
      // 1）获取部门列表
      this.$api
        .querySysDepartment()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.deptList = data;
          } else {
            this.$alert(`${message}`, "部门列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【部门列表】查询接口发生错误：${err}`);
        });

      // 2）获取系统用户列表
      this.$api
        .querySysUser({ pageSize: 1000 })
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.sysUserList = data.items;
          } else {
            this.$alert(`${message}`, "系统用户列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【系统用户列表】查询接口发生错误：${err}`);
        });

      // 5）获取系统角色列表
      this.$api
        .querySysRoleList()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.sysRoleList = data;
          } else {
            this.$alert(`${message}`, "系统角色列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【系统角色列表】查询接口发生错误：${err}`);
        });

      // 6）获取房源类型列表
      this.$api
        .queryHouseTypeDictList({ pageSize: 1000 })
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.houseTypeSelect = data;
          } else {
            this.$alert(`${message}`, "房源类型列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【房源类型列表】查询接口发生错误：${err}`);
        });

      // 7）获取地区列表
      this.$api
        .queryRegionTreeList()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.regionCode = data;
          } else {
            this.$alert(`${message}`, "地区列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【地区列表】查询接口发生错误：${err}`);
        });

      // 8）获取房源列表
      this.$api
        .queryHouseDictList()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            // list 转 map
            let map = new Map();
            data.forEach((element) => {
              map.set(element.code, element.name);
            });
            this.$store.state.DICT.houseMap = map;
          } else {
            this.$alert(`${message}`, "房源列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【房源列表】查询接口发生错误：${err}`);
        });
    },

    // 登录前置处理
    loginBefore(region) {
      // 高风险地区(拦截)
      if (region.isHighRisk === "1") {
        this.$alert(
          `您来自中高风险地区，暂时无法登录本站点！`,
          "登录拦截提示",
          {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          }
        );
      } else {
        // 登录
        this.login();
      }
    },

    // 初始化权限
    initAuth() {
      if (this.$store.state.userSession) {
        if (this.$store.state.userSession.roleIds.indexOf(1) > -1) {
          this.$store.state.auth.isDelete = true;
          this.$store.state.auth.isAdd = true;
          this.$store.state.auth.isEdit = true;
          this.$store.state.auth.isAppraise = true;
          this.$store.state.auth.isAudit = true;
        } else if (this.$store.state.userSession.roleIds.indexOf(5) > -1) {
          this.$store.state.auth.isEdit = true;
        } else if (
          this.$store.state.userSession.roleIds.indexOf(2) > -1 ||
          this.$store.state.userSession.roleIds.indexOf(7) > -1
        ) {
          this.$store.state.auth.isAdd = true;
          this.$store.state.auth.isAppraise = true;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// // 顺时针旋转
// @-webkit-keyframes anticlockwise-rotation {
//   from {
//     -webkit-transform: rotate(0deg);
//   }
//   to {
//     -webkit-transform: rotate(360deg);
//   }
// }

// @-webkit-keyframes vertical-rotation {
//   from {
//     -webkit-transform: rotate(90deg);
//   }
//   to {
//     -webkit-transform: rotate(450deg);
//   }
// }

// // 逆时针旋转
// @-webkit-keyframes clockwise-rotation {
//   from {
//     -webkit-transform: rotate(360deg);
//   }
//   to {
//     -webkit-transform: rotate(0deg);
//   }
// }

.login {
  //让整个div固定在屏幕的最上方和最左方
  position: fixed;
  top: 0;
  left: 0;
  //让整个div跟屏幕实现一模一样的大小
  width: 100%;
  height: 100%;
  min-width: 1000px;
  //让整个div在HTML页面中各个层级的下方，正常情况下，第一个创建的层级z-index的值是0
  z-index: -10;
  zoom: 1;
  //让图片随屏幕大小同步缩放
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  background: url("~@/assets/images/background/bg1.jpg");

  // 记住密码后输入框默认浏览器样式调整
  input:-webkit-autofill {
    -webkit-text-fill-color: #42526c !important; // 记住密码的字的颜色
    transition: background-color 999999s ease-in-out 999999s; // 延时渲染背景色来去除背景色
    caret-color: #21d7eb; //光标颜色
  }

  input:focus {
    // 外边框线去除
    outline: none;
  }
}

#u1 {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 1080px;
  width: 1920px;
}
#u2 {
  position: absolute;
  left: 474px;
  top: 54px;
  height: 972px;
  width: 972px;
  -webkit-transform: rotate(360deg);
  animation: clockwise-rotation 20s linear infinite;
  -moz-animation: clockwise-rotation 20s linear infinite;
  -webkit-animation: clockwise-rotation 20s linear infinite;
  -o-animation: clockwise-rotation 20s linear infinite;
}

#u3_1 {
  position: absolute;
  left: 410px;
  top: 302px;
  width: 1100px;
  height: 477px;
  display: flex;
  -webkit-transform: rotate(90deg);
  animation: vertical-rotation 3s linear infinite;
  -moz-animation: vertical-rotation 3s linear infinite;
  -webkit-animation: vertical-rotation 3s linear infinite;
  -o-animation: vertical-rotation 3s linear infinite;
}

#u3_2 {
  position: absolute;
  left: 410px;
  top: 302px;
  width: 1100px;
  height: 477px;
  display: flex;
  -webkit-transform: rotate(180deg);
  animation: anticlockwise-rotation 3s linear infinite;
  -moz-animation: anticlockwise-rotation 3s linear infinite;
  -webkit-animation: anticlockwise-rotation 3s linear infinite;
  -o-animation: anticlockwise-rotation 3s linear infinite;
}

#u4 {
  position: absolute;
  left: 448px;
  top: 28px;
  width: 1024px;
  height: 1024px;
  display: flex;
  -webkit-transform: rotate(180deg);
  animation: anticlockwise-rotation 15s linear infinite;
  -moz-animation: anticlockwise-rotation 15s linear infinite;
  -webkit-animation: anticlockwise-rotation 15s linear infinite;
  -o-animation: anticlockwise-rotation 15s linear infinite;
}

#u5 {
  position: absolute;
  left: 29px;
  top: 137px;
  width: 1862px;
  height: 513px;
  display: flex;
}

#u6 {
  border-width: 0px;
  position: absolute;
  left: 591px;
  top: 290px;
  width: 741px;
  height: 110px;
  display: flex;
}

#title {
  position: absolute;
  left: 38vw;
  top: 16vh;
  width: 500px;
  height: 62px;
  display: flex;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 47px;
  color: #42526c;
}

#u8 {
  border-width: 0px;
  position: absolute;
  left: 36vw;
  top: 30vh;
  width: 486px;
  height: 56px;
  display: flex;
}

#u8 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u22 {
  border-width: 0px;
  position: absolute;
  left: 37vw;
  top: 32vh;
  width: 40px;
  height: 26px;
  display: flex;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #42526c;
}

#u47 {
  border-width: 0px;
  position: absolute;
  left: 42vw;
  top: 31vh;
  width: 300px;
  height: 40px;
  display: flex;
  font-size: 20px;
  color: #adcbe5;
}

#u23 {
  border-width: 0px;
  position: absolute;
  left: 41vw;
  top: 32vh;
  width: 2px;
  height: 27px;
  display: flex;
}

.username {
  border-width: 0px;
  width: 300px;
  padding: 2px 2px 2px 2px;
  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #42526c;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
  outline: none;
}

#u40 {
  border-width: 0px;
  position: absolute;
  left: 37vw;
  top: 42vh;
  width: 40px;
  height: 26px;
  display: flex;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #42526c;
}

#u26 {
  border-width: 0px;
  position: absolute;
  left: 36vw;
  top: 40vh;
  width: 486px;
  height: 56px;
  display: flex;
}

#u45 {
  border-width: 0px;
  position: absolute;
  left: 42vw;
  top: 41vh;
  width: 300px;
  height: 40px;
  display: flex;
  font-size: 20px;
  color: #adcbe5;
}

#u41 {
  border-width: 0px;
  position: absolute;
  left: 41vw;
  top: 42vh;
  width: 2px;
  height: 27px;
  display: flex;
}

.password {
  width: 300px;
  padding: 2px 2px 2px 2px;
  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #42526c;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
  outline: none;
}

.loginBt {
  position: absolute;
  left: 36vw;
  top: 52vh;
  width: 486px;
  height: 56px;
  background: #409eff;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 56px;
  color: #ffffff;
}

.loginBt2 {
  position: absolute;
  left: 36vw;
  top: 62vh;
  width: 486px;
  height: 56px;
  background: #67c23a;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 56px;
  color: #ffffff;
}

.loginBt:hover,
.loginBt2:hover {
  cursor: pointer;
}

.copyright {
  position: absolute;
  left: 728px;
  top: 715px;
  width: 486px;
  height: 56px;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.819607843137255);
}
</style>
